<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轴承CMS</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__WX__/mui/css/mui.min.css" rel="stylesheet" />
		<link href="__WX__/css/iconfont.css" rel="stylesheet" />
	</head>
	<script src="__WX__/js/jquery.min.js"></script>
	<style>
		ul li{
			list-style: none;
			padding:0;
			margin:0;
			border:0;
		}
		.top{
			min-height:512px;
			background:url('__WX__/img/login_bj.jpg') no-repeat;
			background-size:100%;
			overflow: hidden;
		}
		.cont{
			width:325px;
			min-height:290px;
			background-color:#fff;
			margin:50px auto;
			border-radius: 12px;
			box-shadow: 0px 5px 5px 2px #888888;
			overflow: hidden;
			padding:20px;
		}
		.denglu{
			width:150px;height:50px;float:right;margin-right:35px;margin-top:-15px;
			background:url('__WX__/img/btn_k.png') no-repeat;
			background-size:100%;
			overflow: hidden;
			text-align: center;
			line-height: 46px;
			color:#fff;
			font-size:16px;
			font-weight: bold;
		}
	</style>
	<body style="margin:0px;background-color:#fff;">
		<div class="mui-content" style="background-color:#fff;">
			<!-- <header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left" style="color:#ff5722" href="javascript:history.back(-1)"></a>
				<a class="mui-icon mui-icon-reply mui-pull-right"></a>
				<h1 class="mui-title">注册</h1>
			</header> -->
			<div class="mui-content top">
				<div class="cont" style="background:rgba(255,255,255,0.3);">
					<h2 style="margin-top:10px;">注册</h2>
					<p style="margin-left:3px;margin-top:15px;">新用户注册可红包领取哦</p>
					<form id="zhuce">
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:26%;padding:0px;margin-top:11px;border-right:2px solid #999">会员名称</label>
					    	<input type="text" name="name" class="mui-input-clear " placeholder="请输入会员姓名" style="width:50%;float:left;padding-left:6px;">
					    	<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
					    		<img src="__WX__/img/zhanghao.png" style="width:200%;">
					    	</button>
					    </div>
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">手机号</label>
					    	<input type="text" name="phone"  placeholder="请输入手机号" style="width:43%;float:left;padding-left:6px;">
							<button type="button" data-loading-icon-position="right" class="mui-btn code" style="width:37%;height:35px;border:0px;border-left:1px solid #ccc;background-color:#ccc;color:#fff">发送验证码</button>
					    </div>
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">验证码</label>
					    	<input type="text" name="code" class="mui-input-clear" placeholder="请输入验证码" style="width:50%;float:left;padding-left:6px;">
					    	<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
					    		<img src="__WX__/img/zhanghao.png" style="width:200%;">
					    	</button>
					    </div>
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					    	<input type="password" name="password" class="mui-input-clear " placeholder="请输入密码" style="width:50%;float:left;padding-left:6px;">
					    	<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
					    		<img src="__WX__/img/zhanghao.png" style="width:200%;">
					    	</button>
					    </div>
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:26%;padding:0px;margin-top:11px;border-right:2px solid #999">确认密码</label>
					    	<input type="password" name="password_show" class="mui-input-clear " placeholder="请输入确认密码" style="width:52%;float:left;padding-left:6px;">
					    	<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
					    		<img src="__WX__/img/password.png" style="width:200%;">
					    	</button>
					    </div>
					    <!--<div class="mui-input-row" style="margin-top:10px;">-->
					        <!--<label style="width:30%;padding:0px;margin-top:11px;">详细地址</label>-->
					    	<!--<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">-->
					    		<!--<img src="__WX__/img/password.png" style="width:200%;">-->
					    	<!--</button>-->
					    	<!--<textarea rows="5" placeholder="请输入详细的地址信息" style="width:100%;border:1px solid #53CAFF;border-radius: 6px;"></textarea>-->
					    <!--</div>-->
					</form>
				</div>
			</div>
			
			<div style="margin-top:-60px;">
				<p style="color:#53caff;float:left;margin-left:50px;" class="go">去登录？</p>
				<div class="denglu submit" style="">注册</div>
			</div>
		</div>
		<script src="__WX__/mui/js/mui.min.js"></script>

		<script>
            //修改发送按钮颜色
            $($("input[name=phone]")).bind('input onpropertychange',function(){
                if($(this).val() > 0){
                    $(".code").css('background','#20C1CC');return false;
                }else{
                    $(".code").css('background','#ccc');return false;
                }
            });

            //调用短信发送接口
            $(".code").click(function(){
                var phone = $("input[name=phone]").val();
                var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if(myreg .test(phone)){
                    $.ajax({
                        type:'post',
                        url:'getRegisterInfo',
                        data:{phone:phone},
                        success:function(res){
                            if(res == 200){
                                mui.alert('验证码已发送，请稍后...')
                            }else{
                                mui.alert(res.msg);
                            }
                        }
                    });
                }else{
                    mui.alert( phone +"不是电话");
                    $("input[name=phone]").val(null);
                    return false;
                }
            });

            //注册
            $(".submit").click(function(){
                $.ajax({
                    url:'zhuce',
                    type:'post',
                    data:$("#zhuce").serialize(),
                    success:function(res){
                        if(res.code == 200){
                            mui.alert('注册成功，正在跳转请稍后...');
                            setTimeout(function(){
                                window.location.href = "{:url('Index/index')}";
                            },1500);
                        }else{
                            mui.alert(res.msg);
                        }
                    }
                })
            })

            $(".go").click(function(){
                window.location.href = 'login';
            })
		</script>
	</body>
</html>